<template>
	<view class="msglist">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'系统消息'"></Hearder>
		<!-- #endif -->
		<view>
			<u-transition :show="show">
				<view class="content_main" v-if="loading">
					<view class="time">
						<u-skeleton
							rows="1"
							:title="false"
							:loading="loading"
							:rowsHeight="['50rpx']"
							:rowsWidth="['100%']"
							animate
						></u-skeleton>
					</view>
					<view class="infonew">
						<u-skeleton
							rows="2"
							:title="false"
							:loading="loading"
							:rowsHeight="['50rpx','50rpx']"
							:rowsWidth="['100%','100%']"
							animate
						></u-skeleton>
					</view>
				</view>
				<view class="content_main" v-if="!loading" v-for="item in list" :key="item.id" @click="toPage(item.id)" >
				<!-- <view class="content_main" v-for="item in list" :key="item.id" @click="toPage(item.id)" > -->
					<view class="time">{{item.create_time}}</view>
					<view class="infonew">
						<view class="tit">{{item.title}}</view>
						<view class="infocontent">{{item.subtitle}}</view>
					</view>
				</view>
			</u-transition>
		</view>
	   <view class="nidata" v-if="list.length==0&&!loading">
	   <!-- <view class="nidata" v-if="list.length==0"> -->
			<image src="../../static/images/noimg.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				show:true,
				loading:true,
			}
		},
		onShareAppMessage() {
			return {
				title: this.title,
				path: '/pages/index/msglist'
			}
		},
		onLoad() {
			this.request('/notice/getNotice').then(res=>{
				if(res.data.code == 1){
					this.list=res.data.data
				}
				this.loading = false;
			});
		},
		onShow() {
			
		},
		methods: {
			toPage(id){
				uni.navigateTo({
				    url: 'msgDetail?id='+id
				});
			}
		},
		components: {
		},
	}
</script>

<style scoped lang="scss">
	.msglist{
		overflow: hidden;
		min-height: 100%;
		background: $uni-background-color;
		>view{
			margin: 0 3% 30rpx;
		}
	}
	  .content_main{
		  &:first-of-type{
			  margin-bottom: 20rpx;
		  }
		  text-align: center;
		  .infonew{
			  background: #fff;
			  padding-bottom: 30rpx;
			  border-radius: 20rpx;
			  .tit{
				  padding: 20rpx;
				  border-bottom: $uni-border-bottom;
				  font-size: 32rpx;
			  }
			  .infocontent{
				 overflow: hidden;
				 padding: 20rpx 20rpx 0;
				 display: -webkit-box;
				 -webkit-line-clamp:3;
				 /*! autoprefixer: off */
				 -webkit-box-orient: vertical;
				 /* autoprefixer: on */
				 font-size: 26rpx;
				 color:#999;
				 line-height: 40rpx;
			  }
			  
		  }
		  .time{
			color: #999;
			font-size: 24rpx;
			margin: 30rpx 0 26rpx;
			text-align: center;
		  }
	  }
</style>
